<template>
	<view class="hot_search">
		<p>热搜榜</p>
		<ul>
			<li v-for="(item, index) in hot_search">
				<span>{{index+1}}</span>
				{{item.first}}
			</li>
		</ul>
	</view>
</template>
 
<script>
	export default {
		name: '',
		props: {
			hot_search: {
				type: Array,
				default() {
					return []
				}
			}
		},
		data(){
			return {
				
			}
		},
		methods:{
			
		}
	}
</script>
 
<style lang="less" scoped>
	.hot_search {
		padding: 5px 10px 5px;
		ul {
			padding-top: 10px;
			padding-left: 0;
			li {
				padding-top: 8px;
				&:nth-child(-n+3) {
					color: red;
					&::after {
						content: "hot";
						float: right;
						margin-right: 300upx;
					}
				}
				span {
					display: inline-block;
					width: 50upx;
					margin-right: 20upx;
				}
			}
		}
	}
</style>
